.clip-item-list {
  background: @bg-color;
  user-select: none;
  .clip-item {
    display: flex;
    justify-content: space-between;
    margin: 0px 2px;
    /* 占用px 但是不显示(与背景同色) */
    border-style: solid hidden hidden hidden;
    border-width: 1px 0px 0px 0px;
    border-color: @text-bg-color-lighter @bg-color @bg-color @bg-color;
    cursor: pointer;
    &.active {
      border-style: solid hidden hidden solid;
      border-width: 1px 0px 0px 6px;
      border-color: @text-bg-color-lighter @bg-color @bg-color @primary-color;
      background-color: @text-bg-color-lighter;
      transition: all 0.15s;
    }
    &.multi-active {
      border-style: solid hidden hidden solid; // TODO: 会导致左侧提示块上部被切下去一块
      border-width: 1px 0px 0px 6px;
      border-color: @text-bg-color-lighter @bg-color @bg-color @primary-color;
      transition: all 0.15s;
    }
    &.select {
      background-color: @text-bg-color-lighter;
    }
    .clip-info {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      padding: 10px 10px 10px 5px;
      .clip-time {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 95px;
        max-width: 100px;
        border: 0px solid @text-bg-color-lighter;
        border-color: @text-bg-color-lighter;
        border-style: solid;
        border-width: 0px 2px 0px 0px;
        margin: 0px 5px 0px 0px;
        .relative-date {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          color: @text-color;
          background-color: @text-bg-color;
          border-radius: 5px;
          min-width: 50px;
          padding: 5px 7px;
        }
      }
      .clip-data {
        display: flex;
        overflow: hidden;
        word-break: break-all;
        max-height: 120px;
        max-width: 460px;
        padding: 5px 5px 5px 10px;
        white-space: pre-wrap;
        flex-direction: column;
        color: @text-color;
        img.clip-data-image {
          // 此 class用于区分 file的 image
          max-height: 100px; // 比外框 max-height少一点 因为有 5px的边框
          max-width: 85%;
          box-shadow: 0px 0px 3px @text-color;
        }
        .clip-over-sized-content {
          color: @primary-color;
        }
      }
    }
    .clip-count {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      padding: 10px;
      font-size: 13px;
      color: @text-color-lighter;
      padding: 10px;
    }
  }
}
